<template>
  <div class="icons">
    <swiper :options="swiperOption" v-if="showIcons">
      <swiper-slide v-for='(page, index) of pages' :key="index">
        <div 
          class="icon" 
          v-for="item of page" 
          :key="item.id"
        >
          <div class="icon-img">
            <img class="icon-img-content" :src="item.imgUrl"/>
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div> 
      </swiper-slide>
       
    </swiper>
  
  </div>  
</template>

<script>
export default {
    name: 'HomeIcons',
    props: {
      list: Array
    },
    data () {
      return {
        //设置好 图标区不会自动滚动
        swiperOption: {
          autoplay: false
        }
      }
    },
    computed: {
      pages () {
        const pages = []
        this.list.forEach((item, index) => {
          const page = Math.floor(index/8);
          if(!pages[page]){
            pages[page] = []
          }
          pages[page].push(item)
        })
        return pages;
      },
      showIcons () {
        return this.list.length
      }
    }
}
</script>

<style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    @import '~styles/mixins.styl'
    // 直接设置好，图标滑动区的范围，避免只有存在图片的一行位置才能滑动
    .icons >>> .swiper-container
      height: 0
      padding-bottom: 50%
    .icons
      margin-top: .1rem
      .icon
        position relative
        overflow: hidden
        float: left
        width: 25%
        height: 0
        padding-bottom: 25%
        .icon-img
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: .44rem
          box-sizing: border-box
          padding: .1rem
          .icon-img-content
            display: block
            margin: 0 auto
            height: 100%
        .icon-desc
          position: absolute
          left: 0
          right: 0
          bottom: 0
          height: .44rem
          line-height: .44rem
          text-align: center
          color: #333
          // 语句过长省略，用三个点代替 借用stylus在mixins.styl里面定义的模板
          ellipsis()

</style>